<!--
 * @Author: fcli
 * @Date: 2023-09-04 10:34:58
 * @LastEditors: fcli
 * @LastEditTime: 2024-02-06 10:41:16
 * @FilePath: /anchor-point-page/src/plugin/index.vue
 * @Description: 
-->
<template>
    <div class="anchor-point-page">
        <div class="anchor-point">
            <div class="anchor-li" :class="{ active: menuActive.parent == item.id }"
                @click.stop="menuClick(item.id, item.children[0].id)" v-for="item in authorData" :key="item.id">
                <span class="text" v-if="item.children.length == 0">{{ item.label }}</span>
                <div class="open-wrap" v-if="item.children.length > 0">
                    <div class="first">
                        <div class="text">{{ item.label }}</div>
                        <i v-show="menuActive.parent === item.id" class="arrow-up" />
                        <i v-show="menuActive.parent !== item.id" class="arrow-down" />
                    </div>
                    <div class="second" :class="{ active: menuActive.parent == item.id }">
                        <div :class="{ active: menuActive.child == el.id }" class="text"
                            @click.stop="menuClick(item.id, el.id)" v-for="el in item.children" :key="el.id">{{ el.label
                            }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="anchor-content" @scroll="contentScroll">
            <div class="select-item" v-for="first in authorData" :key="first.id" :id="'id_' + first.id">
                <div class="first-wrap">
                    <div class="first-title">{{ first.label }}</div>
                </div>
                <div class="second-item" v-for="second in first.children" :key="second.id" :id="'id_' + second.id">
                    <div class="second-title">
                        {{ second.label }}<span v-show="second.createDeptName">【{{ second.createDeptName }}】</span>
                    </div>
                    <div class="three-wrap">
                        <div class="three-item" v-for="three in second.children" :key="three.id" :id="'id_' + three.id">
                            <div class="three-label">
                                <slot name="slot-scope" :data="three"></slot>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

defineProps({
    authorData: {
        type: Array<any>,
        default: () => []
    }
})

const menuActive = ref({
    parent: '',
    child: ''
})

const canScroll = ref(true);

//点击导航喵点
const menuClick = (pId: string, id: string) => {
    menuActive.value.parent = pId;
    menuActive.value.child = id;
    canScroll.value = false;
    let top: any = document.querySelector('#id_' + id);
    console.log(top?.offsetTop)
    document.querySelector('.anchor-content')?.scrollTo(0, top?.offsetTop);
    setTimeout(() => {
        canScroll.value = true;
    }, 1000);
}

//右侧面板滚动
const contentScroll = () => {
    if (!canScroll.value) {
        return;
    }
    let tempArr: any = [];
    let secTempArr: any = [];
    Array.from(document.querySelectorAll('.anchor-content .select-item')).forEach((item) => {
        tempArr.push({ id: item.getAttribute('id'), top: Math.abs(item.getBoundingClientRect().top) });
    });
    Array.from(document.querySelectorAll('.anchor-content .select-item .second-item')).forEach((item) => {
        secTempArr.push({ id: item.getAttribute('id'), top: Math.abs(item.getBoundingClientRect().top) });
    });
    tempArr.sort((a: any, b: any) => {
        return a.top - b.top;
    });
    secTempArr.sort((a: any, b: any) => {
        return a.top - b.top;
    });
    menuActive.value.parent = tempArr[0]?.id?.replace('id_', '') || '';
    menuActive.value.child = secTempArr[0]?.id?.replace('id_', '') || '';
}
</script>

<style lang="less">
.anchor-point-page {
    display: flex;
    height: 100%;
    color: #333;

    .anchor-point {
        width: 100px;
        flex-shrink: 0;
        background: rgba(244, 246, 250, 1);
        overflow: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .arrow-up {
            border-top: 4px solid transparent;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid rgba(0, 0, 0, 0.45);
        }

        .arrow-down {
            border-top: 4px solid rgba(0, 0, 0, 0.45);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        .anchor-li {
            position: relative;
            width: 100%;
            text-align: left;
            overflow: hidden;

            .second {
                &.active {
                    background: #f8f8f8;
                }

                .text {
                    &.active {
                        background: #fff;
                        color: #3770f9;
                    }
                }
            }

            .text {
                display: inline-block;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                height: 43px;
                line-height: 43px;
                padding: 0 0 0 8px;
                font-size: 13px;
            }

            .first {
                background: rgba(230, 235, 244, 1);
                height: 43px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
            }

            .open-wrap {
                .first {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-right: 8px;
                }

                .second {
                    font-size: 13px;
                    height: 0;
                    display: flex;
                    flex-direction: column;
                    color: rgba(0, 0, 0, 0.85);
                    background: rgba(244, 246, 250, 1);

                    &.active {
                        height: 100%;
                        overflow: hidden;
                    }

                    .text {
                        font-size: 13px;
                        height: 40px;
                        line-height: 40px;
                        padding-left: 12px;
                    }
                }
            }
        }
    }

    .anchor-content {
        flex: 1;
        padding: 12px;
        overflow: auto;
        position: relative;

        .select-item {
            padding: 8px 0 8px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            margin-top: 16px;

            .first-wrap {
                position: relative;

                .first-title {
                    display: inline-block;
                    left: 50%;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.35);
                    white-space: nowrap;
                    position: absolute;
                    top: -16px;
                    background: #fff;
                    padding: 0 12px;
                    transform: translate(-50%, 0);
                }
            }



            .second-title {
                font-size: 13px;
                text-align: left;
                font-weight: bold;
                color: #333;
                margin: 8px 0;

                span {
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 12px;
                }
            }


            .three-wrap {
                display: grid;
                grid-gap: 12px;
                grid-template-columns: repeat(2, calc(50% - 8px));

                .three-label {
                    display: flex;
                    position: relative;
                    align-items: center;
                    justify-content: center;
                    white-space: nowrap;
                    overflow: hidden;
                    padding: 6px 8px;
                    text-overflow: ellipsis;
                    color: rgba(0, 0, 0, 0.85);
                    border-radius: 4px;
                    background: #f8f8f9;
                    font-size: 12px;
                    height: 45px;
                }
            }

            .title {
                text-align: left;
                font-weight: bold;
                margin-bottom: 12px;
            }
        }
    }
}
</style>